<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        产品管理
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/css/x-admin.css" media="all">
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>会员管理</cite></a>
              <a><cite>会员列表</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                                                                        style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <form class="layui-form x-center" action="" style="width:800px">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
                <label class="layui-form-label">日期范围</label>
                <div class="layui-input-inline" style="width: 0px;margin-left: -10px">
                    <input class="layui-input" placeholder="开始日" id="LAY_demorange_s" onclick="layui.laydate({elem: this, festival: true})">
                </div>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="开始日" id="LAY_demorange_s" onclick="layui.laydate({elem: this, festival: true})">
                </div>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="截止日" id="LAY_demorange_e" onclick="layui.laydate({elem: this, festival: true})">
                </div>

                <div class="layui-input-inline">
                    <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>
                    </button>
                </div>
            </div>
        </div>
    </form>
    <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button>
        <button class="layui-btn" onclick="member_add('添加产品','/promsg/insertProPage','800','750')"><i class="layui-icon">&#xe608;</i>添加产品
        <button class="layui-btn" style="width: 200px" onclick="member_add('添加产品','/promsg/insertKindPage','800','450')"><i class="layui-icon">&#xe608;</i>添加产品种类
        </button>
        <span class="x-right" style="line-height:40px">共有数据：88 条</span></xblock>
    <div class="layui-form">
    <table   class="layui-table">
        <thead>
        <tr>
            <th style="width: 5%"><input  type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
            <th>id</th>
            <th>产品名</th>
            <th>产品种类</th>
            <th>机构</th>
            <th>经办人</th>
            <th>联系人</th>
            <th>产品状态</th>
            <th>使用状态</th>
            <th>使用日期</th>
            <th>
                操作
            </th>
        </tr>
        </thead>
        <tbody id="app">
        <tr v-for="msg in data1">
            <td ><input type="checkbox" name="" lay-skin="primary"></td>
            <td id="msgid" >{{msg.id}}</td>
            <td >{{msg.proName}}</td><div :id="val">.
            <td >{{msg.kindName}}</td>
            <td >{{msg.orgName}}</td>
            <td >{{msg.operatorId}}</td>
            <td >{{msg.contactId}}</td>
            <td >{{msg.proState}}</td>
            <td >{{msg.useState}}</td>

            <td width="200px">{{msg.useDate|time}}</td>
            <td class="td-manage">
                <a title="详情" href="javascript:;" onclick="member_show('详情','/promsg/proById','800','750',document.getElementById('msgid').innerHTML)"
                   class="ml-5" style="text-decoration:none">
                    <i class="layui-icon">&#xe60b;</i>
                </a>
                <a title="编辑" href="javascript:;" onclick="member_edit('修改','','4','','510')"
                   class="ml-5" style="text-decoration:none">
                    <i class="layui-icon">&#xe642;</i>
                </a>
                <a title="删除" href="javascript:;" onclick="member_del(this,document.getElementById('msgid').innerHTML)"
                   style="text-decoration:none">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
    </div>
    <div id="page"></div>
</div>


<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="/static/js/x-layui.js" charset="utf-8"></script>
<script src="/static/js/vue/vue.js" charset="utf-8"></script>

<script>
    layui.use(['laydate', 'element', 'laypage', 'layer'], function () {
        $ = layui.jquery;//jquery
        laydate = layui.laydate;//日期插件
        lement = layui.element();//面包导航
        laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层

        //以上模块根据需要引入

        var v=new Vue({
            el: '#app',
            data:{
                data1:[]
            }
        })


        //以下将以jquery.ajax为例，演示一个异步分页
        function demo1(curr){
            $.get("/promsg/allproData", {pageSize: 3, currPage: curr || 1},

            function(data){
                if (data != null) {
                    v.data1 = JSON.parse(data);
                }
                //此处仅仅是为了演示变化的内容
                //显示分页
                laypage({
                    cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                   // pages: data.pages, //通过后台拿到的总页数
                    curr: curr || 1, //当前页
                    pages: 3,
                    first: 1,
                    last: 3,
                    prev: '<em><</em>',
                    next: '<em>></em>',
                    jump: function(obj, first){ //触发分页后的回调
                        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                            demo1(obj.curr);
                        }
                    }
                });
            });
        };
        demo1();



        var start = {
            min: laydate.now()
            , max: '2099-06-16 23:59:59'
            , istoday: false
            , choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            min: laydate.now()
            , max: '2099-06-16 23:59:59'
            , istoday: false
            , choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };

        document.getElementById('LAY_demorange_s').onclick = function () {
            start.elem = this;
            laydate(start);
        }
        document.getElementById('LAY_demorange_e').onclick = function () {
            end.elem = this
            laydate(end);
        }
    });
    Vue.filter('time', function (value) {//value为13位的时间戳
        function add0(m) {
            return m < 10 ? '0' + m : m
        }
        var time = new Date(parseInt(value));
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();

        return y + '-' + add0(m) + '-' + add0(d);
    });


    //批量删除提交
    function delAll() {
        layer.confirm('确认要删除吗？', function (index) {
            var ids="";

            //捉到所有被选中的，发异步进行删除
            $.post("/promsg/delById",{id:id},function (data) {
                if (data!=""){
                    layer.msg('已删除!', {icon: 1, time: 1000});
                }
            })
            $(obj).parents("tr").remove();
            layer.msg('删除成功', {icon: 1});
        });
    }
    /*用户-添加*/
    function member_add(title, url, w, h) {
        x_admin_show(title, url, w, h);
    }
    /*用户-查看*/
    function member_show(title, url, w, h,id) {
        url=url+'?id='+id;
        x_admin_show(title, url, w, h);
    }

    // 用户-编辑
    function member_edit(title, url, id, w, h) {
        x_admin_show(title, url, w, h);
    }
    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            $.post("/promsg/delById",{id:id},function (data) {
                if (data!=""){
                    layer.msg('已删除!', {icon: 1, time: 1000});
                }
            })
            $(obj).parents("tr").remove();
        });
    }
</script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();


    layui.use('form', function(){
        var $ = layui.jquery, form = layui.form();

        //全选
        form.on('checkbox(allChoose)', function(data){
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

    });
</script>
</body>
</html>